<template>
	<div class="login-wrap">
		<div class="ms-title">Yin-music 后台管理</div>
		<div class="ms-login">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
				<el-form-item>
					<el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="ruleForm.password"  type="password" placeholder="密码"></el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" v-on:click="submitForm">提交</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				ruleForm: {
					username: 'admin',
					password: '123'
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			submitForm: function() {
				let formData = new FormData();
				formData.append('username',this.ruleForm.username);
        formData.append('password',this.ruleForm.password);
				this.axios({
					method: "post",
					url: "http://localhost:8888/music/admin/login/status",
					withCredentials: true,
					data: formData
				}).then((res)=>{
          if(res.data.code==1){
            localStorage.setItem('username',this.ruleForm.username);
            this.$router.push('/home');
            this.$notify({
                      title: res.data.description,
                      message: '欢迎登入',
                      type: 'success'
                    });
          }
          if(res.data.code==0){
            this.$notify.error({
                      title: res.data.description,
                      message: '请重新登入',

                    });
          }
					//this.$message(res.data.description);
				})
       /* this.$http.post("admin/login/status",formData)
        .then((res)=>{
        	this.$message(res.data.description);
        }).error(()=>{
        	this.$message("axios错误")
        }) */

			}
		}
	}
</script>

<style scoped>
	.login-wrap {
		position: relative;
		background: url('../assets/img/background.jpg');
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
		width: 100%;
		height: 100%;
	}

	.ms-title {
		position: absolute;
		top: 50%;
		width: 100%;
		margin-top: -230px;
		text-align: center;
		font-size: 30px;
		font-weight: 600;
		color: #fff;
	}

	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 300px;
		height: 160px;
		margin: -150px 0 0 -190px;
		padding: 40px;
		border-radius: 5px;
		background: #fff;
	}

	.login-btn {
		text-align: center;
	}

	.login-btn button {
		width: 100%;
		height: 36px;
	}
</style>
